/**
 * 使用场景需要获取元素精确的位置 或者dom 相关
 * 
 */
import ButtonWithTooltip from './ButtonWithTooltip'
export default function LayoutEffectDemo(){
  return (
    <div>
      <ButtonWithTooltip 
        tooltipContent = {
          <div>
            这歌tooltip提示无法适应在这个按钮的上方
            <br />
            所以它出现在了下面
          </div>
        }
      >
        Hover over me 
      </ButtonWithTooltip>
      <div style={{ height: 50 }} />
      <ButtonWithTooltip 
        tooltipContent = {
          <div>
            This tooltip fits above the button
          </div>
        }
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
      <div style={{ height: 10 }} />
      <ButtonWithTooltip
        tooltipContent={
          <div>
            This tooltip fits above the button
            <br />
            所以它出现在了下面
          </div>
        }
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
    </div>
  )
}